<template>
  <div>
	
	<myheader></myheader>
	<!-- 面包屑导航 -->
	<Breadcrumb :datas = 'datas'></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			<table>
				<tr>
					<td style="padding:5px;">
						用户名：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="username">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						密码：
					</td>
					<td style="padding:5px;">
						<input type="password" v-model="password">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						验证码：
					</td>
					<td style="padding:5px;">
						<input type="text" v-model="code">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						
					</td>
					<td style="padding:5px;">
						<!-- v-bond -->
						<img @click="change_img" :src="src">
					</td>
				</tr>
				<tr>
					<td style="padding:5px;">
						
					</td>
					<td style="padding:5px;">
						<Button @click="submit" color='blue'>提交</Button> &nbsp;&nbsp;
						<Button @click="reset" color='green'>重置</Button>
					</td>
				</tr>
			</table>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

// 导包
import myheader from './myheader'
import myfooter from './myfooter'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  // 声明面包屑导航
	  datas: [{title: '首页', route: {name: 'index'}}, {title: '注册页面'}],
	  username: '',
	  password: '',
	  code: '',
	  src: 'http://127.0.0.1:8000/mycode/',
    }
  },

  // 注册组件
  components: {
	  'myheader': myheader,
	  'myfooter': myfooter
  },

  mounted:function(){

   
  
  },
  methods:{
	  // 刷新验证码
	  change_img: function () {
		// 随机字符串
		var num = Math.ceil(Math.random()*10);
		// 赋值地址
		this.src = this.src + '?code=' +num;  
	  },

	  // 重置
	  reset: function () {
		this.username = ''
		this.password = ''
		this.code = ''
	  },

	  // 提交注册
	  submit: function () {
		  if(this.username == ''){
			  this.$Message('用户名不能为空');
			  return false;
		  }

		  if(this.password == ''){
			  this.$Message('密码不能为空');
			  return false;
		  }

		  if(this.code == ''){
			  this.$Message('验证码不能为空');
			  return false;
		  }

		  // 发送请求
		  this.axios.get('http://127.0.0.1:8000/register/',
		  {params: {
			  username:this.username,
			  password:this.password,
			  code: this.code
			  }}).then((result) =>{
				console.log(result);
				this.$Message(result.data.message);
		  })
	  }
     
  }
}


</script>
 
<style>



</style>